<template>
    <baseView>
        <div class="appointForm">
            <DataTableV2 :fetchApi="appointReport" :tableColumn="tableColumn" :params="params" ref="tableRef">
                <!-- 查询 -->
                <template #search>
                    <div class="search-box">
                        <div class="form-box">
                            <el-form :inline="true"
                                style="width:100%;display: flex; align-items: center; justify-content: space-between;">
                                <div class="left-box">
                                    <el-form-item>
                                        <el-button type="warning" plain class="exportButton" @click="exportTable">
                                            <img :src="exportIcon" alt="" style="margin-right: 5px;">
                                            导出
                                        </el-button>
                                    </el-form-item>
                                    <el-form-item>
                                        <div class="time-box">
                                            <div v-for="(item, index) in timeArray"
                                                :class="[currentType == item ? 'activeClass' : '']" :key="index"
                                                class="radio-box" @click="clickTime(item)"> {{ item }}
                                            </div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="时间">
                                        <div class="select-box">
                                            <el-date-picker v-if="['日', '月', '年'].includes(currentType)"
                                                v-model="params.date" :format="formatString"
                                                :value-format="formatString" :type="pickerType" style="width: 160px;"
                                                :clearable="false" />
                                            <el-select v-else v-model="params.date" placeholder="请选择季度"
                                                style="width: 120px;" clearable>
                                                <el-option v-for="item in seasonOption" :key="item.value"
                                                    :label="item.text" :value="item.value" />
                                            </el-select>
                                        </div>
                                    </el-form-item>
                                </div>
                                <div class="right-box">
                                    <el-form-item label="路段">
                                        <routeSelect v-model:selectValue="params.routeid"> </routeSelect>
                                    </el-form-item>
                                    <el-form-item label="商铺名称">
                                        <el-input v-model="params.shopname" placeholder="请输入" clearable></el-input>
                                    </el-form-item>
                                    <el-form-item label="垃圾类型">
                                        <el-select v-model="params.type" placeholder="请选择" style="width: 120px;"
                                            clearable>
                                            <el-option v-for="item in rubbishOption" :key="item.value"
                                                :label="item.text" :value="item.value" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="onSearch">
                                            <el-icon style="margin-right: 2px;">
                                                <Search />
                                            </el-icon>查询
                                        </el-button>
                                        <el-button type="primary" plain @click="resetParams">重置</el-button>
                                    </el-form-item>
                                </div>
                            </el-form>
                        </div>
                    </div>
                </template>

                <!-- 垃圾量 -->
                <template #预约订单量="{ row }">
                    {{ row['预约订单量'] }}个
                </template>
            </DataTableV2>
        </div>
    </baseView>
</template>

<script setup>
import exportIcon from "@/assets/images/export.png"
// import { exportExcelTable } from "@/utils/tool"
import { appointReport, appointReportExcel } from "@/api/reportForm"
import { routeList } from "@/api/cleanRoute"
import dayjs from "dayjs"

// 入参
const params = reactive({
    date: dayjs().format('YYYY-MM-DD'),
    daytype: "日",
    routeid: "",
    shopname: "",
    type: "",
    export: 0,
    pagenum: 1,
    pagesize: 10,

})
// 重置入参
function resetParams() {
    params.date = dayjs().format('YYYY-MM-DD')
    params.daytype = "日"
    params.routeid = ""
    params.shopname = ""
    params.type = ""
    params.export = 0
    params.pagenum = 1
    params.pagesize = 10
    currentType.value = "日"
    onSearch()
}
// 查询
function onSearch() {
    params.export = 0
    tableRef.value.fetchList()
}

function exportTable() {
    params.export = 1
    appointReportExcel(params).then(res => {
        const blob = new Blob([res]);
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = '预约订单报表.xlsx';
        link.click();
    })
}

const tableRef = ref(null)
// table的表头
const tableColumn = ref([
    {
        label: '商铺名称',
        prop: '商铺名称'
    },
    {
        label: '商铺地址',
        prop: '商铺地址'
    },
    {
        label: '所属路段',
        prop: '所属路段'
    },
    {
        label: '预约订单',
        prop: '预约订单量',
        slot: true
    }
])

// 日期类型选择
const timeArray = ['日', '月', '季', '年']
const currentType = ref('日')
function clickTime(time) {
    currentType.value = time
    params.daytype = time
}

// 计算季度的值
function getSeason() {
    const currentMonth = new Date().getMonth();
    // 计算当前季度
    const quarter = Math.floor(currentMonth / 3) + 1;
    return new Date().getFullYear() + '-' + quarter
}
// 日期选择器选择时间之后的值格式化
const formatString = ref("YYYY-MM-DD")
// 日期选择器的类型
const pickerType = ref('date')
watch(currentType, (newV) => {
    if (newV == '日') {
        params.date = dayjs().format('YYYY-MM-DD')
        formatString.value = "YYYY-MM-DD"
        pickerType.value = "date"
    } else if (newV == '月') {
        params.date = dayjs().format('YYYY-MM')
        formatString.value = "YYYY-MM"
        pickerType.value = "month"
    } else if (newV == '季') {
        params.date = getSeason()
    } else if (newV == '年') {
        params.date = dayjs().format('YYYY')
        formatString.value = "YYYY"
        pickerType.value = "year"
    }
})


// 季度下拉选择
let seasonOption = []
function getSeasonOptions() {
    let option = []
    let obj = {
        1: "一",
        2: "二",
        3: "三",
        4: "四",
    }
    for (let key in obj) {
        option.push({
            text: `第${obj[key]}季度`,
            value: new Date().getFullYear() + '-' + key
        })
    }
    seasonOption = option
}
// 垃圾下来选择
const rubbishOption = [
    {
        text: "干垃圾",
        value: "dry"
    },
    {
        text: "湿垃圾",
        value: "wet"
    },
    {
        text: "餐厨垃圾",
        value: "food"
    }
]





onMounted(() => {
    getSeasonOptions()
})
</script>

<style lang="scss" scoped>
.appointForm {
    height: 100%;
    width: 100%;

    .search-box {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left-box {
            display: flex;

        }

        .time-box {
            display: flex;
        }

        .form-box {
            margin-top: 10px;
            width: 100%;
        }
    }

}

.radio-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 36px;
    opacity: 1;
    border-radius: 4px;
    cursor: pointer;

}


.activeClass {
    color: rgba(255, 255, 255, 1);
    background: rgba(0, 160, 252, 1);
}

.exportButton {
    margin-right: 36px;
    height: 36px;
}
</style>